<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Candlestick - Parsing Data</title>

    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
      
        #chart {
      max-width: 650px;
      margin: 35px auto;
    }
      
    </style>

    <script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>

    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="../../../dist/apexcharts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
    

    <script>
      // Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
      // Based on https://gist.github.com/blixt/f17b47c62508be59987b
      var _seed = 42;
      Math.random = function() {
        _seed = _seed * 16807 % 2147483647;
        return (_seed - 1) / 2147483646;
      };
    </script>

    <script>
  function generateDateRange(days, startDate = new Date()) {
    const dates = [];
    const currentDate = new Date(startDate);
    
    currentDate.setDate(currentDate.getDate() - days + 1);
    
    for (let i = 0; i < days; i++) {
      dates.push(new Date(currentDate).toISOString());
      currentDate.setDate(currentDate.getDate() + 1);
    }
    
    return dates;
  }
  
  function getRandomRecentDate() {
    const start2025 = new Date('2025-01-01');
    const now = new Date();
    const timeDiff = now.getTime() - start2025.getTime();
    const randomTime = Math.random() * timeDiff;
    
    return new Date(start2025.getTime() + randomTime);
  }
  
  function generatePriceChange(currentPrice, minPrice, maxPrice, volatility = 0.03) {
    const changePercent = (Math.random() - 0.5) * 2 * volatility;
    let newPrice = currentPrice * (1 + changePercent);
    
    newPrice = Math.max(minPrice, Math.min(maxPrice, newPrice));
    
    return Math.round(newPrice * 100) / 100;
  }
  
  function generateHighLow(open, close, minPrice, maxPrice) {
    const min = Math.min(open, close);
    const max = Math.max(open, close);
    
    const volatilityRange = Math.max(1, (max - min) * 2);
    
    const low = Math.max(
      minPrice,
      min - Math.random() * volatilityRange * 0.5
    );
    
    const high = Math.min(
      maxPrice,
      max + Math.random() * volatilityRange * 0.5
    );
    
    return {
      high: Math.round(high * 100) / 100,
      low: Math.round(low * 100) / 100
    };
  }
  
  function generateSingleCandlestick(date, previousClose, minPrice = 120, maxPrice = 180) {
    const gapPercent = (Math.random() - 0.5) * 0.02;
    let open = previousClose * (1 + gapPercent);
    open = Math.max(minPrice, Math.min(maxPrice, open));
    open = Math.round(open * 100) / 100;
    
    const close = generatePriceChange(open, minPrice, maxPrice, 0.04);
    const { high, low } = generateHighLow(open, close, minPrice, maxPrice);
    
    return {
      date: date,
      open: open,
      high: high,
      low: low,
      close: close
    };
  }
  
  function generateCandlestickData(days, options = {}) {
    const {
      startingPrice = 150,
      minPrice = 120,
      maxPrice = 180,
      startDate = getRandomRecentDate()
    } = options;
    
    if (!Number.isInteger(days) || days <= 0) {
      throw new Error('Days must be a positive integer');
    }
    
    if (startingPrice < minPrice || startingPrice > maxPrice) {
      throw new Error('Starting price must be within min and max price range');
    }
    
    const dates = generateDateRange(days, startDate);
    const candlesticks = [];
    let previousClose = startingPrice;
    
    for (const date of dates) {
      const candlestick = generateSingleCandlestick(date, previousClose, minPrice, maxPrice);
      candlesticks.push(candlestick);
      previousClose = candlestick.close;
    }
    
    return candlesticks;
  }
  
  const stockData = generateCandlestickData(30);
  </script>
  </head>

  <body>
    
    <div id="app">
      <div id="chart">
      <apexchart type="candlestick" height="350" :options="chartOptions" :series="series"></apexchart>
    </div>
    </div>

    <!-- Below element is just for displaying source code. it is not required. DO NOT USE -->
    <div id="html">
      &lt;div id=&quot;chart&quot;&gt;
        &lt;apexchart type=&quot;candlestick&quot; height=&quot;350&quot; :options=&quot;chartOptions&quot; :series=&quot;series&quot;&gt;&lt;/apexchart&gt;
      &lt;/div&gt;
    </div>

    <script>
      new Vue({
        el: '#app',
        components: {
          apexchart: VueApexCharts,
        },
        data: {
          
          series: [{
            data: stockData,
            parsing: {
              x: "date",
              y: ["open", "high", "low", "close"]
            }
          }],
          chartOptions: {
            chart: {
              type: 'candlestick',
              height: 350
            },
            xaxis: {
              type: "datetime"
            },
          },
          
          
        },
        
      })
    </script>
    
  </body>
</html>
